<template>
  <el-drawer v-model="drawer" title="门店订单详情" size="30%">
    <el-form ref="formRef" :model="formData">
      <el-card style="max-width: 100%">
        <template #header>
          <div class="card-header">
            <span>业务信息</span>
          </div>
        </template>
        <el-form-item label="门店">
          {{ formData.storeName }}
        </el-form-item>
        <el-form-item label="美发师">
          {{ formData.userName }}
        </el-form-item>
        <el-form-item label="订单状态">
          <dict-tag :type="DICT_TYPE.MEIJIA_STORE_ORDER_STATUS" :value="formData.status" />
        </el-form-item>
      </el-card>
      <el-card style="max-width: 100%">
        <template #header>
          <div class="card-header">
            <span>项目信息</span>
          </div>
        </template>
        <el-table :data="formData.orderSubVOList">
          <el-table-column label="项目名称" align="center" prop="projectName" />
          <el-table-column label="项目实收（元）" align="center" prop="actualPayment">
            <template #default="scope">
              {{ (scope.row.actualPayment / 100).toFixed(2) }}
            </template>
          </el-table-column>
        </el-table>
        <el-form-item label="合计">
          {{ (formData.actualPayment / 100).toFixed(2) }}
        </el-form-item>
      </el-card>
      <el-card style="max-width: 100%">
        <template #header>
          <div class="card-header">
            <span>订单信息</span>
          </div>
        </template>
        <el-form-item label="订单编号">
          {{ formData.code }}
        </el-form-item>
        <el-form-item label="下单时间">
          {{ formatDate(formData.createTime) }}
        </el-form-item>
        <el-form-item label="服务完成时间">
          {{ formatDate(formData.finishTime) }}
        </el-form-item>
        <el-form-item label="支付时间">
          {{ formatDate(formData.payFinishTime) }}
        </el-form-item>
      </el-card>
      <el-card style="max-width: 100%" v-for="item in formData.orderSubVOList" :key="item.code">
        <template #header>
          <div class="card-header">
            <span
              >{{ item.projectName }}:分账信息（分账金额{{
                (item.actualPayment / 100).toFixed(2)
              }}元）</span
            >
          </div>
        </template>
        <el-table :data="JSON.parse(item.divideSnapshot)">
          <el-table-column label="分账角色" align="center">
            <template #default="scope">
              <dict-tag :type="DICT_TYPE.MEIJIA_DIVIDE_ROLE" :value="scope.row.role" />
            </template>
          </el-table-column>
          <el-table-column label="分成比例" align="center" prop="name">
            <template #default="scope">
              {{ scope.row.proportion * 100 }}
            </template>
          </el-table-column>
          <el-table-column label="所得金额（元）" align="center" prop="moneyCNY">
            <template #default="scope">
              {{ scope.row.moneyCNY }}
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-form>
    <template #footer>
      <el-button @click="drawer = false">关闭</el-button>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { dateFormatter, formatDate } from '@/utils/formatTime'
import * as OrderApi from '@/api/meijia/order'
import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
defineOptions({ name: 'StoreOrderDetail' })
const url = import.meta.env.VITE_UPLOAD_URL
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const drawer = ref(false)
const loading = ref(true) // 列表的加载中
const formData = ref({
  avatar: '',
  status: ''
})
const open = async (code: string) => {
  drawer.value = true
  formData.value = await OrderApi.getStoreOrderByCode(code)
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
/** 初始化 **/
onMounted(() => {})
</script>
